<template>
  <view>
    <!-- 搜索组件 -->
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
    
    <!-- 轮播图的区域 -->
    <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" circular="true">
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
          <image :src="item.imgUrl"></image>
        </view>
      </swiper-item>
    </swiper>
    <image src="../../static/ad.jpg" style="width: 96%;height: 120px;margin-top: 20px;margin-left: 7px;margin-bottom: 20px;"></image>
    <view class="hot">
      <view class="head">
        <view class="title">
          <text>热门推荐</text>
          <text class="subtitle">各种图书 应有尽有</text>
        </view>
      </view>
      <view class="goods-list">
        <view v-for="item in hotList" :key="item.id" class="goods-item">
          <navigator :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.id">
            <image :src="item.picture" mode="aspectFill" style="width: 350rpx; height: 350rpx;"></image>
            <view class="name">{{ item.name }}</view>
            <view class="price">&yen;{{ item.price }}</view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import badgeMix from '@/mixins/tabbar-badge.js'
export default {
  mixins: [badgeMix],
  data() {
    return {
      swiperList: [],
      hotList: [],
    }
  },
  onLoad() {
    this.getSwiperList();
    this.getHotList();
  },
  methods: {
    async getSwiperList() {
      try {
        const { data: res } = await uni.$http.get('/home/banner');
        this.swiperList = res.result;
      } catch (error) {
        uni.$showMsg();
        console.error(error);
      }
    },
    async getHotList() {
      try {
        const { data: res } = await uni.$http.get('/home/hot');
        this.hotList = res.result;
      } catch (error) {
        uni.$showMsg();
        console.error(error);
      }
    },
    gotoSearch() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    }
  }
}
</script>

<style lang="scss">
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}

.head {
  padding: 20rpx 0;
  display: flex;
  align-items: flex-end;
  
  .title {
    flex: 1;
    font-size: 35rpx;
    font-weight: normal;
    margin-left: 6rpx;
    height: 35rpx;
    line-height: 35rpx;

    .subtitle {
      font-size: 20rpx;
      color: #999;
      margin-left: 20rpx;
    }
  }
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: auto;
  max-height: 406rpx; /* 设置最大高度，防止内容溢出 */

  .goods-item {
    width: 48%; /* 将每个商品项的宽度设置为百分比，以适应手机屏幕 */
    height: auto; /* 自适应高度 */
    margin-top: 5px;
    margin-left: 5px;
  
    background: #f8f8f8;
    transition: all .5s;
  
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    .name {
      font-size: 22rpx;
      padding-top: 12rpx;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .price {
      color: #cf4444;
      text-align: center;
    }
  }
}
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}

</style>
